import { UploadOutlined } from "@ant-design/icons";
import { Button, Divider, Form, Input, Modal, Upload } from "antd";


const RegisterComponent = ({ visible, onCancel, onFinish }) => {

  const [form] = Form.useForm();

  const handleCancel = () => {
    onCancel();
  };

  const handleReset = () => {
    form.resetFields();
  };

  const handleFinish = (values:any) => {
    onFinish(values);
    form.resetFields();
  }


  return(
    <div>
      <Modal 
      title="注册界面"
      open={visible}
      onCancel={handleCancel}
      footer={null}
      >
            <Form
      // {...formItemLayout}
      form={form}
      name="register"
      onFinish={handleFinish}
      style={{ maxWidth: 600 }}
      scrollToFirstError
    >
      <Divider />
      <Form.Item
        name="userAccount"
        label="账号"
        rules={[{ required: true, message: '请输入你的账号', whitespace: true }]}
      >
        <Input placeholder="为你的用户确定一个账号"/>
      </Form.Item>

      <Form.Item
        name="userName"
        label="昵称"
        rules={[{ required: true, message: '请输入你的昵称', whitespace: true }]}
      >
        <Input placeholder="取一个好听的昵称吧~"/>
      </Form.Item>
      <Form.Item
        name="userAvatar"
        label="头像"
      >
        <Upload>
          <Button icon={<UploadOutlined />}>Click to Upload</Button>
        </Upload>
      </Form.Item>
      <Form.Item
        name="userPassword"
        label="密码"
        rules={[
          {
            required: true,
            message: '请输入密码!',
          },
        ]}
        hasFeedback
      >
        <Input.Password placeholder="请输入您的密码"/>
      </Form.Item>

      <Form.Item
        name="checkPassword"
        label="确认密码"
        rules={[
          {
            required: true,
            message: '请再次输入您的密码',
          }
        ]}
      >
        <Input.Password placeholder="请输入确认密码"/>
      </Form.Item>
      <Divider />
      <Form.Item >
        <Button type="primary" htmlType="submit" style={{ marginRight: '30px' }}>
          注册
        </Button>
        <Button htmlType="button" onClick={handleReset}>
        重置
        </Button>
      </Form.Item>
    </Form>
      </Modal>
    </div>
  );
};

export default RegisterComponent;